<template>
	<div class="invoice-registration">
		<!-- 页面标题 -->
		<div class="page-header">
			<h2>{{ pageTitle }}</h2>
		</div>
		
		<!-- 搜索表单 -->
		<el-card class="search-card" shadow="never">
			<el-form :model="searchForm" :inline="true" class="search-form">
				<el-form-item label="单据编号:">
					<el-input
						v-model="searchForm.documentNumber"
						placeholder="请输入"
						clearable
						style="width: 200px"
					/>
				</el-form-item>
				<el-form-item label="单据日期:">
					<el-date-picker
						v-model="searchForm.dateRange"
						type="daterange"
						range-separator="~"
						start-placeholder="请选择开始"
						end-placeholder="请选择结束"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 300px"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">
						<el-icon><Search /></el-icon>
						查询
					</el-button>
					<el-button @click="handleReset">
						<el-icon><Refresh /></el-icon>
						重置
					</el-button>
					<el-button @click="toggleExpand">
						展开
						<el-icon><ArrowDown /></el-icon>
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>

		<!-- 操作按钮 -->
		<el-card class="action-card" shadow="never">
			<div class="action-bar">
				<div class="left-actions">
					<el-button type="primary" @click="handleAdd">
						<el-icon><Plus /></el-icon>
						新增
					</el-button>
					<el-button @click="handleExport">
						<el-icon><Download /></el-icon>
						导出
					</el-button>
					<el-button @click="handleImport">
						<el-icon><Upload /></el-icon>
						导入
					</el-button>
				</div>
				<div class="right-actions">
					<span class="selected-count">已选择 {{ selectedCount }}项</span>
					<el-button type="text" @click="handleCustomizeColumns">
						<el-icon><Setting /></el-icon>
						自定义列
					</el-button>
				</div>
			</div>
		</el-card>

		<!-- 数据表格 -->
		<el-card class="table-card" shadow="never">
			<el-table
				:data="tableData"
				@selection-change="handleSelectionChange"
				style="width: 100%"
				v-loading="loading"
			>
				<el-table-column type="selection" width="55" />
				<el-table-column type="index" label="#" width="60" />
				<el-table-column prop="documentNumber" label="单据编号" sortable>
					<template #header>
						<span>单据编号</span>
						<el-icon class="sort-icon"><ArrowUp /></el-icon>
					</template>
				</el-table-column>
				<el-table-column prop="documentDate" label="单据日期" sortable>
					<template #header>
						<span>单据日期</span>
						<el-icon class="sort-icon"><ArrowUp /></el-icon>
					</template>
				</el-table-column>
				<el-table-column prop="documentSubject" label="单据主题" sortable>
					<template #header>
						<span>单据主题</span>
						<el-icon class="sort-icon"><ArrowUp /></el-icon>
					</template>
				</el-table-column>
				<el-table-column prop="customer" label="客户" sortable>
					<template #header>
						<span>客户</span>
						<el-icon class="sort-icon"><ArrowUp /></el-icon>
					</template>
				</el-table-column>
				<el-table-column prop="invoiceType" label="发票类型" />
				<el-table-column prop="invoiceNumber" label="发票号" sortable>
					<template #header>
						<span>发票号</span>
						<el-icon class="sort-icon"><ArrowUp /></el-icon>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template #default="scope">
						<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
						<el-dropdown>
							<el-button type="text">
								更多<el-icon><ArrowDown /></el-icon>
							</el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="handleView(scope.row)">查看</el-dropdown-item>
									<el-dropdown-item @click="handleDelete(scope.row)">删除</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="pagination-container">
				<el-pagination
					:current-page="pagination.currentPage"
					:page-size="pagination.pageSize"
					:page-sizes="[10, 20, 50, 100]"
					:total="pagination.total"
					layout="total, sizes, prev, pager, next"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
	Search,
	Refresh,
	ArrowDown,
	Plus,
	Download,
	Upload,
	Setting,
	ArrowUp
} from '@element-plus/icons-vue'

// 页面标题
const pageTitle = computed(() => {
	return '销售发票(退货)'
})

// 搜索表单数据
const searchForm = reactive({
	documentNumber: '',
	dateRange: []
})

// 表格数据
const tableData = ref([
	{
		id: 1,
		documentNumber: 'XSFP-221120-001',
		documentDate: '2022-11-20',
		documentSubject: '',
		customer: '北京xx化学工业公司',
		invoiceType: '退货发票',
		invoiceNumber: '1'
	}
])

// 分页数据
const pagination = reactive({
	currentPage: 1,
	pageSize: 10,
	total: 1
})

// 其他状态
const loading = ref(false)
const selectedCount = ref(0)
const selectedRows = ref([])

// 搜索方法
const handleSearch = () => {
	loading.value = true
	// 模拟API调用
	setTimeout(() => {
		loading.value = false
		ElMessage.success('查询成功')
	}, 1000)
}

// 重置方法
const handleReset = () => {
	searchForm.documentNumber = ''
	searchForm.dateRange = []
	handleSearch()
}

// 展开/收起
const toggleExpand = () => {
	ElMessage.info('展开更多搜索条件')
}

// 新增
const handleAdd = () => {
	ElMessage.info('新增销售发票(退货)')
}

// 导出
const handleExport = () => {
	ElMessage.success('导出成功')
}

// 导入
const handleImport = () => {
	ElMessage.info('导入功能')
}

// 自定义列
const handleCustomizeColumns = () => {
	ElMessage.info('自定义列设置')
}

// 选择变化
const handleSelectionChange = (selection) => {
	selectedRows.value = selection
	selectedCount.value = selection.length
}

// 编辑
const handleEdit = (row) => {
	ElMessage.info(`编辑: ${row.documentNumber}`)
}

// 查看
const handleView = (row) => {
	ElMessage.info(`查看: ${row.documentNumber}`)
}

// 删除
const handleDelete = (row) => {
	ElMessageBox.confirm(
		`确定要删除单据 ${row.documentNumber} 吗？`,
		'确认删除',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}
	).then(() => {
		ElMessage.success('删除成功')
	}).catch(() => {
		ElMessage.info('已取消删除')
	})
}

// 分页大小变化
const handleSizeChange = (size) => {
	pagination.pageSize = size
	handleSearch()
}

// 当前页变化
const handleCurrentChange = (page) => {
	pagination.currentPage = page
	handleSearch()
}

// 组件挂载
onMounted(() => {
	handleSearch()
})
</script>

<style scoped>
.invoice-registration {
	padding: 20px;
}

.page-header {
	margin-bottom: 20px;
}

.page-header h2 {
	margin: 0;
	color: #303133;
	font-size: 20px;
	font-weight: 500;
}

.search-card {
	margin-bottom: 16px;
}

.search-form {
	margin-bottom: 0;
}

.action-card {
	margin-bottom: 16px;
}

.action-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.left-actions {
	display: flex;
	gap: 8px;
}

.right-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.selected-count {
	color: #666;
	font-size: 14px;
}

.table-card {
	margin-bottom: 16px;
}

.sort-icon {
	margin-left: 4px;
	font-size: 12px;
	color: #999;
}

.pagination-container {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}
</style> 